<template>
	<view class="custom">
		<view class="customCard">
			<ppc-section :title="'基础信息(必填)'"></ppc-section>
			<view class="row">
				<label class="left" for="name">食物名称:</label>
				<input id="name" type="text" v-model="baseFormData.food_name" placeholder-class="placeholderStyle"
					placeholder="如:双层吉士汉堡" />
			</view>
			<view class="row">
				<label class="left" for="number">数量:</label>
				<input id="number" type="number" v-model="baseFormData.number" placeholder-class="placeholderStyle"
					@input="numberInput" placeholder="1" />
			</view>
			<view class="row">
				<label class="left" for="unit">单位:</label>
				<input id="unit" type="text" v-model="baseFormData.unit" placeholder-class="placeholderStyle"
					placeholder="如:克,颗,碗" />
			</view>
			<view class="row">
				<view class="left more">
					<label for="caloric">热量:</label>
					<uni-data-checkbox v-model="type" :localdata="types" />
				</view>
				<input v-if="type==1" id="caloric" type="digit" v-model="baseFormData.caloric"
					placeholder-class="placeholderStyle" @input="caloricInput" placeholder="千卡" />
				<input v-else id="caloric" type="digit" v-model="baseFormData.caloric"
					placeholder-class="placeholderStyle" @input="caloricInput" placeholder="千焦" />
			</view>
		</view>
		<view class="customCard">
			<ppc-section :title="'其他信息'"></ppc-section>
			<view class="row row1">
				<text class="left">选择照片</text>
				<uni-file-picker limit="1" @success="changePhotot" :del-icon="false" disable-preview
					:imageStyles="imageStyles" file-mediatype="image">
					<image class="image" src="../../static/icon/exportImg.png" mode="aspectFit"></image>
				</uni-file-picker>
			</view>
			<view class="row">
				<label class="left" for="carbohydrate">碳水化合物:</label>
				<input id="carbohydrate" type="digit" v-model="baseFormData.carbohydrate" @input="carbohydrateInput" />
				<text>克</text>
			</view>
			<view class="row">
				<label class="left" for="protein">蛋白质:</label>
				<input id="protein" type="digit" v-model="baseFormData.protein" @input="proteinInput" />
				<text>克</text>
			</view>
			<view class="row">
				<label class="left" for="fat">脂肪:</label>
				<input id="fat" type="digit" v-model="baseFormData.fat" @input="fatInput" />
				<text>克</text>
			</view>
		</view>
		<view class="save" @click="saveFoodData">
			<text class="saveText">确认</text>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		nextTick,
		getCurrentInstance
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()
	import ppcSection from '/components/ppcSection.vue'
	// 食物基础信息
	const baseFormData = reactive({
		food_name: '',
		number: '',
		unit: '',
		caloric: '',
		food_img: '',
		carbohydrate: '',
		protein: '',
		fat: '',
		type: 0,
		status: 3 //1为常用2为收藏3为自定义4为套餐
	})
	const imageStyles = ref({
		width: 64,
		height: 64,
		border: {
			radius: '20rpx'
		}
	})
	//上传图片
	const tempFile = ref()
	// 计量单位类型(1为千卡,2为千焦)
	const type = ref(1)
	const types = reactive([{
		text: "千卡",
		value: 1
	}, {
		text: "千焦",
		value: 2
	}])
	// 限制数量输入只能数字
	const numberInput = (e) => {
		nextTick(() => {
			baseFormData.number = Number(e.target.value.replace(/[^\d]/g, ''))
		})

	}
	// 限制热量输入只能数字加小数点
	const caloricInput = (e) => {
		nextTick(() => {
			baseFormData.caloric = Number(e.target.value.replace(".", "$#$").replace(/\./g, "").replace("$#$",
				"."))
		})
	}
	// 限制碳水输入只能数字加小数点
	const carbohydrateInput = (e) => {
		nextTick(() => {
			baseFormData.carbohydrate = Number(e.target.value.replace(".", "$#$").replace(/\./g, "").replace(
				"$#$",
				"."))
		})

	}
	// 限制蛋白质输入只能数字加小数点
	const proteinInput = (e) => {
		nextTick(() => {
			baseFormData.protein = Number(e.target.value.replace(".", "$#$").replace(/\./g, "").replace("$#$",
				"."))
		})
	}
	// 限制脂肪输入只能数字加小数点
	const fatInput = (e) => {
		nextTick(() => {
			baseFormData.fat = Number(e.target.value.replace(".", "$#$").replace(/\./g, "").replace("$#$",
				"."))
		})
	}
	// 选择食物图片
	const changePhotot = (e) => {
		uniCloud.uploadFile({
			filePath: e.tempFiles[0].path,
			cloudPath: getNewFileName(e.tempFiles[0].extname)
		}).then(res => {
			if (res.success) {
				uni.showToast({
					title: '上传成功',
					icon: 'none',
					duration: 1000
				});
				baseFormData.food_img = res.fileID
			} else {
				uni.showToast({
					title: '上传失败',
					icon: 'none',
					duration: 1000
				});
			}
		})
	}
	//上传食物信息
	const saveFoodData = () => {
		if (!baseFormData.food_name || !baseFormData.number || !baseFormData.unit || !baseFormData.caloric) {
			uni.showModal({
				title: '警告',
				content: "请输入正确信息"
			})
			return
		}
		uni.showLoading({
			title: "上传中..."
		})
		proxy.$http('addFood', baseFormData).then(res => {
			if (!res.errCode) {
				uni.showToast({
					title: '新增成功',
					duration: 1000
				});
				uni.hideLoading()
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/my/my'
					})
				}, 1000)
			}
		})
	}
	//修改图片名称
	const getNewFileName = (extname) => {
		return new Date().getTime() + baseFormData.name + '.' + extname
	}
</script>

<style lang="scss">
	.custom {
		margin: 20rpx;
		padding: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #5b5e62;

		.customCard {
			width: 100%;
		}

		.save {
			width: 160rpx;
			height: 70rpx;
			line-height: 70rpx;
			border-radius: 40rpx;
			background-color: #87C38F;
			margin-top: 100rpx;
			text-align: center;
			text-indent: 20rpx;
			letter-spacing: 20rpx;

			.saveText {
				font-size: 34rpx;
				color: #fbffee;
				font-weight: bold;
			}
		}
	}

	.row1 {
		align-items: center !important;

		.uni-file-picker__container {
			justify-content: flex-end;
		}

		.image {
			width: 80rpx;
			height: 80rpx
		}
	}

	.row {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: baseline;

		.left {
			height: 100rpx;
			width: 50%;
			font-size: 26rpx;
			color: #8d959b;
			font-weight: bold;
		}

		.more {
			width: 60% !important;
			display: flex;
			flex-direction: row;
			align-items: center;

			label {
				margin-right: 20rpx;
			}

			.uni-data-checklist .checklist-group .checklist-box {
				margin: 0;
				margin-right: 10rpx;

			}

			.uni-data-checklist .checklist-group .checklist-box .checklist-content .checklist-text {
				color: #a8b5bd;
				font-size: 22rpx;
			}
		}

		text {
			font-size: 26rpx;
			color: #8d959b;
			font-weight: bold;
		}

		input {
			width: 50%;
			text-align: right;
			line-height: 70rpx;
			vertical-align: bottom;
			border-bottom: 1px dashed #5b5e62;
		}

		.placeholderStyle {
			color: #ddd;
			font-size: 26rpx;
		}
	}
</style>